<script lang="ts" setup>
import { reactive, ref, watch } from 'vue';

import { icons, VIcon } from '@croco/framework/icons';

const props = defineProps({
    input: { type: Boolean, default: false },
    disabled: { type: Boolean, default: false },
});

const emits = defineEmits(['change']);

const value = defineModel({ default: 'icon:plus' });

const dialogVisible = ref(false);
const active = ref<string>('');
const data = ref<string[]>([...icons]);
const searchText = ref('');

const iconData = ref<Record<string, any>[]>([]);
const iconCache = reactive<Record<string, any>>({});
data.value.forEach((item: string) => {
    const [prefix, icon] = item.split(':');
    if (!iconCache[prefix!!]) {
        let name;
        switch (prefix) {
            case 'avatar': {
                name = '头像';
                break;
            }
            case 'icon': {
                name = 'ICON图标';
                break;
            }
            case 'svg': {
                name = 'SVG图标';
                break;
            }
            default: {
                name = '默认图标';
                break;
            }
        }
        iconCache[prefix!!] = { name, prefix, icon: [] };
    }
    // 将图标名称添加到对应的分组数组中
    iconCache[prefix!!].icon.push(`${prefix}:${icon}`);
});
iconData.value = Object.values(iconCache);
// 设置默认tab标签
const [prefix] = value.value.split(':');
active.value = prefix ? (iconCache[prefix] ? prefix : 'customize') : 'customize';

function open() {
    if (props.disabled) {
        return false;
    }
    dialogVisible.value = true;
}

function onSelectIcon(e: any) {
    if (e.target.tagName !== 'SPAN') {
        return false;
    }
    value.value = e.target.dataset.icon;
    dialogVisible.value = false;
    if (value.value !== e.target.dataset.icon) {
        emits('change');
    }
}

function onClear() {
    value.value = '';
    dialogVisible.value = false;
}

function onSearch(text = searchText.value) {
    iconData.value = Object.values(iconCache).map((item: any) => {
        const value = { ...item };
        if (text) {
            value.icon = value.icon.filter((n: any) => n.includes(text));
        }
        return value;
    });
}

function onChange() {
    emits('change');
}

watch(
    () => searchText.value,
    (v) => onSearch(v),
);

defineExpose({ open });
</script>

<template>
    <div class="sc-icon-select">
        <div class="sc-icon-select__wrapper w-full" @click="open">
            <el-input v-if="input" v-model="value" :disabled="disabled" readonly @change="onChange()">
                <template #prefix>
                    <el-icon>
                        <VIcon :icon="value || 'icon:plus'" />
                    </el-icon>
                </template>
            </el-input>
            <el-button v-else plain style="padding: 10px">
                <template #icon>
                    <el-icon>
                        <VIcon :icon="value || 'icon:plus'" />
                    </el-icon>
                </template>
            </el-button>
        </div>
        <el-dialog v-model="dialogVisible" :width="760" append-to-body destroy-on-close title="图标选择器">
            <div class="sc-icon-select__dialog">
                <el-form @submit.prevent="onSearch()">
                    <el-form-item prop="searchText">
                        <el-input v-model="searchText" class="sc-icon-select__search-input" clearable placeholder="搜索" size="large">
                            <template #prefix>
                                <VIcon icon="icon:search" />
                            </template>
                        </el-input>
                    </el-form-item>
                </el-form>
                <el-tabs v-model="active">
                    <template v-for="item in iconData" :key="item">
                        <el-tab-pane :name="item.prefix">
                            <template #label>
                                {{ item.name }}
                                <el-tag size="small" type="info" style="margin-left: 2px">{{ item.icon?.length }}</el-tag>
                            </template>
                            <div class="sc-icon-select__list">
                                <el-scrollbar>
                                    <ul @click="onSelectIcon">
                                        <el-empty v-if="item.icon?.length === 0" :image-size="100" description="未查询到相关图标" />
                                        <li v-for="icon in item.icon" :key="icon">
                                            <span :data-icon="icon"></span>
                                            <el-icon>
                                                <VIcon :icon="icon" />
                                            </el-icon>
                                        </li>
                                    </ul>
                                </el-scrollbar>
                            </div>
                        </el-tab-pane>
                    </template>
                    <el-tab-pane name="customize">
                        <template #label> 自定义图标 </template>
                        <el-input v-model="value" placeholder="请输入图标名称" size="large">
                            <template #prefix>
                                <VIcon :icon="value" />
                            </template>
                            <template #suffix>
                                <a href="https://icones.js.org/" target="_blank">
                                    <VIcon icon="icon:question-filled" />
                                </a>
                            </template>
                        </el-input>
                        <div class="sc-icon-select__list flex-center">
                            <ul>
                                <li>
                                    <span :data-icon="value"></span>
                                    <el-icon>
                                        <VIcon :icon="value" />
                                    </el-icon>
                                </li>
                            </ul>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <template #footer>
                <el-button type="danger" @click="onClear">清除</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
.sc-icon-select {
    display: inline-flex;
    width: 100%;
}

/*.sc-icon-select__wrapper {
    display: inline-flex;
}

.sc-icon-select__wrapper:deep(.el-input__wrapper) {
    cursor: pointer;
}

.sc-icon-select__wrapper:deep(.el-input__wrapper).is-focus {
    box-shadow: 0 0 0 1px var(--el-input-hover-border-color) inset;
}

.sc-icon-select__wrapper:deep(.el-input__inner) {
    flex-grow: 0;
    width: 0;
}

.sc-icon-select__wrapper:deep(.el-input__icon) {
    margin: 0;
    font-size: 16px;
}

.sc-icon-select__wrapper.hasValue:deep(.el-input__icon) {
    color: var(--el-text-color-regular);
}

.sc-icon-select__wrapper:deep(.el-input__prefix-inner i) {
    margin-right: 0;
}*/

.sc-icon-select__list {
    height: 270px;
    overflow: auto;

    li {
        display: inline-block;
        width: 80px;
        height: 80px;
        margin: 5px;
        vertical-align: top;
        transition: all 0.1s;
        border-radius: 4px;
        position: relative;

        span {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
            cursor: pointer;
        }

        i {
            width: 100%;
            height: 100%;
            font-size: 26px;
            color: #6d7882;
            justify-content: center;
            align-items: center;
            border-radius: 4px;
        }

        &:hover {
            box-shadow: 0 0 1px 4px var(--el-color-primary);
            background: var(--el-color-primary-light-9);

            i {
                color: var(--el-color-primary);
            }
        }
    }
}
</style>
